<template>
	<view class="container">
		
		<!-- <view class="flex-between row boxPanel ">
		  <view class="">上级场所<text class="c-origin text-bold">*</text></view>
		  <view class="flex-y-center" style="width: 50%;">
		    <input type="text" placeholder="无"  placeholder-class="inputs" v-model="parentName" :disabled="true" style="text-align: right;">
		  	<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
		  </view>
		</view> -->
		<!-- <view class="flex-between row boxPanel ">
		  <view class="">场所名称<text class="c-origin text-bold">*</text></view>
		  <view class="row-right" style="flex: 1;">
		     <input type="text" placeholder="请输入场所名称"  placeholder-class="inputs" v-model="formData.name" style="text-align: right;">
		  </view>
		</view> -->
		<view class="flex-between row boxPanel">
		  <view class="">选择位置</view>
		  <view class="flex-y-center" style="flex: 1;justify-content: flex-end;"  @click="selectAddress">
		    <input type="text" placeholder="请选择位置"  placeholder-class="inputs" v-model="formData.name" :disabled="true" style="text-align: right;width:88%;">
		  	<u-icon name="arrow-right" color="#788096" size="14"></u-icon>
		  </view>
		</view>
		<view class="flex-between row boxPanel ">
		  <view class="">详细地址<text class="c-origin text-bold">*</text></view>
		  <view class="row-right" style="flex: 1;">
		     <input type="text" placeholder="请输入详细地址"  placeholder-class="inputs" v-model="formData.address" style="text-align: right;">
		  </view>
		</view>
		<view class="boxPanel row flex-between">
			<view class="">设为默认地址</view>
			<u-switch v-model="formData.is_default" activeColor="#ff8f33" size="20" @change="change"></u-switch>
		</view>
		<!-- <view class="flex-between row boxPanel ">
		  <view class="">展示序号</view>
		  <view class="row-right" style="flex: 1;">
		     <input type="text" placeholder="请输入场所序号(必须为数字)"  placeholder-class="inputs" v-model="formData.sort" style="text-align: right;">
		  </view>
		</view>
		<view class="flex-between row boxPanel ">
		  <view class="">场所备注</view>
		  <view class="row-right" style="flex: 1;">
		     <input type="text" placeholder="请输入场所备注，最多20字"  placeholder-class="inputs" v-model="formData.remark" style="text-align: right;">
		  </view>
		</view> -->
		
		<view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
			<view class="submit" @click="submitInfo">保存</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				formData: {
					name: '',
					address: '',
					is_default: true,
					latitude: 0,
					longitude: 0
				},
				parentName: '',
				id: '',
				addressValue: '',

			}
		},
		onLoad(data) {
			if(data.id) {
				this.id = data.id;
				this.getDetailInfo()
			}
			this.isIphoneX = this.$util.uniappIsIPhoneX()
		},
		methods: {
			submitInfo() {
				let apiurl = '';
				// 表单验证
				if (!this.formData.name) {
					uni.showToast({
						title: '请选择场所地址',
						icon: 'none'
					});
					return;
				}

				let addressValueArr = this.addressValue.split('-');
				
				// 显示加载中
				uni.showLoading({
					title: '提交中...'
				});
				
				// 构造提交数据
				const submitData = {
					name: this.formData.name,
					longitude: this.formData.longitude,
					latitude: this.formData.latitude,
					address: this.formData.address || '',
					province_id: addressValueArr[0],
					city_id: addressValueArr[1],
					district_id: addressValueArr[2],
					is_default: this.formData.is_default?1:0,
				};

				if(this.id) {
					apiurl = "/api/userHealth/editDeviceLocation";
					submitData.id = this.id;
				}else {
					apiurl = "/api/userHealth/addDeviceLocation";
				}
				
				this.$api.sendRequest({
			      url: apiurl,
			      data: submitData,
			      success: res => {
					uni.hideLoading();
			        if(res.code == 0) {
						uni.showToast({
							title: this.id?'修改成功':'添加成功',
							icon: 'success'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);

			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			selectAddress() {
				// #ifdef MP
				uni.chooseLocation({
					success: res => {
						console.log(res)
						this.formData.latitude = res.latitude;
						this.formData.longitude = res.longitude;
						this.formData.address = res.name;
						this.getAddress(res.longitude + ',' + res.latitude);
					},
					fail(res) {
						uni.getSetting({
							success: function(res) {
								var statu = res.authSetting;
								if (!statu['scope.userLocation']) {
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success(tip) {
											if (tip.confirm) {
												uni.openSetting({
													success: function(data) {
														if (data.authSetting['scope.userLocation'] === true) {
															this.$util.showToast({
																title: '授权成功'
															});
															//授权成功之后，再调用chooseLocation选择地方
															setTimeout(function() {
																uni.chooseLocation({
																	success: data => {
																		this.formData.latitude = res.latitude;
																		this.formData.longitude = res.longitude;
																		this.formData.address = res.name;
																		this.getAddress(res.longitude + ',' + res.latitude);
																	}
																});
															}, 1000);
														}
													}
												});
											} else {
												this.$util.showToast({
													title: '授权失败'
												});
											}
										}
									});
								}
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				var urlencode = this.formData;
				uni.setStorageSync('addressInfo', urlencode);
				let backurl = Config.h5Domain + '/pages/addAddress/addAddress?type=' + this.localType;
				if (this.formData.id) backurl += '&id=' + this.formData.id;
				if (this.back) backurl += '&back=' + this.back;

				window.location.href = 'https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=' + encodeURIComponent(
					backurl) + '&key=' + Config.mpKey + '&referer=myapp';
				// #endif
			},
			//获取详细地址
			getAddress(value) {
				this.$api.sendRequest({
					url: '/api/memberaddress/tranAddressInfo',
					data: {
						latlng: value
					},
					success: res => {
						if (res.code == 0) {
							this.formData.name = '';
							this.formData.name += res.data.province != undefined ? res.data.province : '';
							this.formData.name += res.data.city != undefined ? '-' + res.data.city : '';
							this.formData.name += res.data.district != undefined ? '-' + res.data.district : '';
							this.addressValue = '';
							this.addressValue += res.data.province_id != undefined ? res.data.province_id : '';
							this.addressValue += res.data.city_id != undefined ? '-' + res.data.city_id : '';
							this.addressValue += res.data.district_id != undefined ? '-' + res.data.district_id : '';
						} else {
							this.showToast({
								title: '数据有误'
							});
						}
					}
				});
			},
			getDetailInfo() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getDeviceLocationInfo",
			      data: {
					id: this.id
				  },
			      success: res => {
			        if(res.code == 0) {
						this.formData.name = res.data.name;
						this.formData.address = res.data.address;
						this.formData.longitude = res.data.longitude;
						this.formData.latitude = res.data.latitude;
						this.formData.is_default = res.data.is_default==1?true:false;

						this.addressValue = '';
						this.addressValue += res.data.province_id != undefined ? res.data.province_id : '';
						this.addressValue += res.data.city_id != undefined ? '-' + res.data.city_id : '';
						this.addressValue += res.data.district_id != undefined ? '-' + res.data.district_id : '';
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.boxPanel {
	padding: 40rpx 24rpx;
}
.row {
	.inputs {
		font-size: 28rpx;
		color: #B8BAC2;
	}
}
textarea {
  height: 100rpx;
}
</style>
